<template>
	<div class="addVideo">
		<el-form
			ref="forms"
			size="small"
			:model="forms"
			:rules="rules"
			label-width="120px"
			label-position="right"
		>
			<el-tabs type="border-card" value="service_telephone">
				<el-tab-pane label="系统设置" name="service_telephone">
					<el-form-item label="客服电话：" prop="config_value">
						<el-input
							v-model.number="forms.config_value"
							placeholder="请输入"
							clearable
							maxlength="20"
							show-word-limit
							style="width: 100%"
							@input="handleNumberInput($event, 'config_value')"
						/>
					</el-form-item>
				</el-tab-pane>
				<el-row class="dialog-footer" style="text-align: center">
					<el-button type="primary" @click="saveVideos">保存</el-button>
				</el-row>
			</el-tabs>
		</el-form>
		<el-dialog
			title="图片预览"
			:visible.sync="imgDialogVisible"
			class="preview-dialog"
			width="600px"
		>
			<img :src="showImg" alt="" style="max-width: 100%" />
		</el-dialog>
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import { getConfig, setConfig } from '@/api/system.js'
	export default {
		name: 'SystemConfig',
		data() {
			return {
				forms: {
					config_key: 'service_telephone',
					config_value: ''
				},
				rules: {
					config_value: [{ required: true, message: '请输入监督电话', trigger: 'blur' }]
				},
				showImg: '', // 预览大图
				imgDialogVisible: false
			}
		},
		computed: {
			...mapGetters(['userid', 'userinfo'])
		},
		created() {
			this.loadData()
		},
		methods: {
			loadData() {
				const loading = this.$loading({
					lock: true,
					text: '加载中~',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.5)'
				})
				getConfig({}).then(
					res => {
						const value = res.data.lists.filter(item => {
							return item.config_key === this.forms.config_key
						})
						this.forms.config_value = value[0]?.config_value || ''

						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			async saveVideos() {
				this.$refs.forms.validate(async valid => {
					console.log(valid)
					if (valid) {
						this.$confirm('是否确认提交当前配置信息?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						})
							.then(() => {
								const loading = this.$loading({
									lock: true,
									text: '数据提交中~',
									spinner: 'el-icon-loading',
									background: 'rgba(0, 0, 0, 0.5)'
								})
								setConfig(this.forms).then(
									res => {
										this.$message.success('保存成功！')
										setTimeout(() => {
											loading.close()
											this.loadData()
										}, 1000)
									},
									err => {
										loading.close()
									}
								)
							})
							.catch(() => {})
					} else {
						this.$message.error('请完善信息后提交！')
					}
				})
			},

			handleNumberInput(e, key) {
				this.forms[key] = e.replace(/[^\d]/g, '')
				this.$forceUpdate()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addVideo {
		width: 80%;
		min-width: 950px;
		background-color: #fff;
		margin: 0 auto;
		padding: 30px;
		.picBox {
			position: relative;
			font-size: 28px;
			color: #8c939d;
			width: 360px;
			height: 640px;
			overflow: hidden;
			line-height: 1;
			text-align: center;
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			margin: 0 10px 10px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			&:nth-child(2n) {
				margin-right: 0;
			}
			&:hover {
				border-color: #409eff;
			}
			::v-deep {
				.el-icon-close {
					font-size: 13px;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 99;
					color: #fff;
					padding: 3px;
					background-color: #aaa;
					border-radius: 50%;
					box-shadow: 0 0 6px #666;
				}
			}
			.upload-img {
				width: 100%;
				display: block;
				cursor: move;
			}
		}
		.tip-warn {
			color: #333;
			font-size: 12px;
			padding: 6px 10px;
			line-height: 20px;
			border: 1px solid #fcd68b;
			border-radius: 2px;
			background: #fef2db;
			margin: 0 0 16px;
			display: flex;
			.el-icon-info {
				color: #faae17;
				margin: 4px 6px 0 0;
				display: inline-block;
			}
		}
		.beijing .picBox {
			width: 235px;
			height: 300px;
			&:nth-child(2n) {
				margin-right: 10px;
			}
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
		::v-deep {
			.upload-demo {
				display: flex;
				flex-wrap: wrap;
				.el-upload {
					overflow: hidden;
				}
			}
			.el-upload__tip {
				margin: -10px 0 0;
				color: #ff4949;
				width: 100%;
			}
			.dialog-footer {
				margin-top: 50px;
				.el-button {
					width: 100px;
				}
			}
		}
		.box-wrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}
	::v-deep {
		.preview-dialog .el-dialog {
			margin-top: 80px !important;
		}
		.el-dialog .el-dialog__body {
			max-height: calc(85vh - 100px);
		}
	}
</style>
